<template>
    <div class="card-box">
        <!-- <van-nav-bar title="卡片" left-arrow @click-left="back" /> -->
        <div class="card-ct">

            <div class="cont">
                <div
                    class="bg h-[260px] w-[auto] flex flex-col justify-end px-6 py-10 text-white rounded-3xl gap-8 bg-gradient-to-r from-purple-500 to-pink-500">
                </div>
                <div
                    class="card relative z-10 h-[260px] w-[auto] flex flex-col justify-end px-6 py-10 text-white rounded-3xl gap-8 bg-gradient-to-r from-purple-500 to-pink-500">
                    <div class="font-medium fs-24">
                        希尔顿大酒店
                    </div>
                    <p class="text-2xl  font-medium">卡号：5430 4900 3232</p>
                    <div class="flex justify-between gap-10">
                        <div class="flex-1 flex flex-col justify-end">
                            <p class="self-end">房间号</p>
                            <p class="self-end">204</p>
                        </div>
                        <div class="flex-1 flex flex-col justify-end">
                            <p class="self-end">入住日期</p>
                            <p class="self-end">2/14/2024</p>
                        </div>
                        <div class="self-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 58 36" height="36"
                                width="58">
                                <circle fill-opacity="0.62" fill="#F9CCD1" r="18" cy="18" cx="18"></circle>
                                <circle fill="#424242" r="18" cy="18" cx="40" opacity="0.36"></circle>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>


            <!-- <div class="bg-black py-5 d-flex justify-content-center align-items-center">
                <div class="obj">
                    <div class="objchild">
                        <span class="inn1">
                            <div class="font">房间号</div>
                        </span>
                        <span class="inn2"></span>
                        <span class="inn3"></span>
                        <span class="inn4"></span>
                        <span class="inn5"></span>
                        <span class="inn6"></span>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const back = () => {
    router.back()
}

</script>
<style scoped>
.main__heading {
    font-weight: 600;
    font-size: 2.25em;
    margin-bottom: 0.75em;
    text-align: center;
    color: #eceff1;
}

.cont {
    position: relative;
    /* filter: blur(6px); */
}

.bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    filter: blur(26px);
}

.font {
    color: #fff;
    line-height: 1.5;
}

.card-box {
    min-height: 100vh;
    padding-top: 32px;
    /* background: #000; */
}

.card-ct {
    padding: 24px;
}

.cards {
    position: relative;
}

.obj {
    position: relative;
    width: 200px;
    height: 200px;
    /* background-color: rgb(96, 96, 232); */
    transform-style: preserve-3d;
    transition: 0.5s all;
    transform: rotateX(-10deg);
    margin: auto;
}

.objchild {
    /* animation: rotate 4s infinite linear; */
    transform-style: preserve-3d;
    transform-origin: center;
    position: absolute;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */
}

.objchild::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: rgb(37, 101, 230); */
    /* background: radial-gradient(center center, farthest-side , #9993, transparent); */
    filter: blur(20px);
    box-shadow: 0 0 200px 15px white;
    transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}

/* 转起来看不到字啊  那能看到图吗  要是能看到图还要啥字 图我估计也一样
 */

.inn1,
.inn2,
.inn3,
.inn4,
.inn5,
.inn6,
.inn7 {
    padding: 16px;
    box-sizing: border-box;
}


.inn1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    filter: blur(2px);
    transform: translateZ(-100px) translateX(-50%);
    background: linear-gradient(to top, rgb(11, 11, 102), rgb(96, 96, 232));
}

.inn2 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(100px) translateX(-50%);
    background: linear-gradient(to top, rgb(11, 11, 102), rgb(96, 96, 232));
}

.inn3 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateX(-100px) rotateY(90deg);
    background: linear-gradient(to top, rgb(11, 11, 102), rgb(96, 96, 232));
}

.inn4 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateX(100px) rotateY(90deg);
    background: linear-gradient(to top, rgb(10, 10, 78), rgb(96, 96, 232));
}

.inn5 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(10, 10, 79);
    transform: rotateX(90deg) translateZ(-100px) translateX(-50%);
}

.inn6 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(46, 46, 46);
    transform: rotateX(90deg) translateZ(100px) translateX(-50%);
}

@keyframes rotate {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }

    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}
</style>